<template>
  <div class="work-container">
    <div class="head-title">零工报工单审核</div>
    <div class="job-list">
      <van-list>
        <div
          v-for="(item, index) in list"
          :key="index"
          class="job-item"
          @click="gotoDetail(item)"
        >
          <div class="job-header">
            <div class="tit"><b>业务类型：</b>零工报工</div>
            <div class="pull-r">
              <van-icon
                v-if="rfwork && rfwork.leaderPass!='0'"
                name="edit"
                size="20"
                color="#1989fa"
                @click.stop="gotoEdit(item.oddjobId)"
              />
            </div>
          </div>
          <div class="job-body">
            <dl>
              <dt>出工方式：</dt>
              <dd>{{item.wm.wmName}}</dd>
            </dl>
            <dl>
              <dt>开始时间：</dt>
              <dd>{{item.oddjobStart}}</dd>
            </dl>
            <dl>
              <dt>结束时间：</dt>
              <dd>{{item.oddjobEnd}}</dd>
            </dl>
          </div>
        </div>
        <van-empty
          v-if="!list.length"
          description="暂无报工数据"
        />
      </van-list>
    </div>
    <div
      v-if="rfwork && (rfwork.recheckPass!== '0' || rfwork.leaderPass!== '0')"
      class="fixed-bar"
    >
      <van-button
        v-if="rfwork && rfwork.leaderPass!='0'"
        type="info"
        round
        @click="fnApprovedDbinfo"
      >审核通过</van-button>
      <van-button
        v-if="rfwork && rfwork.recheckPass!='0' && rfwork.leaderPass==='0'"
        type="info"
        round
        @click="fnCheckPassDbinfo"
      >复核通过</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Dialog } from 'vant';

import { getRfwork } from "@/api/sl/rfwork";
import { listOddjobByrfworkId } from "@/api/sl/oddjob";
import { approvedDbinfo, checkPassDbinfo } from "@/api/sl/dbinfo";

export default {
  name: "h5Job",
  components: {
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      dbId: undefined,
      source: undefined,
      sourceId: undefined,
      rfwork: {},
      list: [],
      total: 0,
      finished: false,
      loading: false,
    };
  },
  computed: {},
  created() {
    const { dbId, source, sourceId } = this.$route.query;
    this.dbId = dbId;
    this.source = source;
    this.sourceId = sourceId;
    console.log(dbId, source, sourceId);
    getRfwork(this.sourceId).then(response => {
      this.rfwork = response.data;
    });
    this.load();
  },
  methods: {
    load() {
      console.log(this.activeName);
      this.loading = true;
      this.getList();
    },
    // 跳转详情 oddjobId
    // http://localhost:1024/dev-api/sl/oddjob/13
    gotoDetail(item) {
      this.$router.push({ path: `/h5/rfwork-linggong-info?oddjobId=${item.oddjobId}&rfworkId=${item.rfworkId}` })
    },
    /** 查询报工项列表 */
    getList() {
      this.loading = true;
      console.log(this.sourceId)
      listOddjobByrfworkId(this.sourceId).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        } else {
          Notify({ type: "danger", message: "出错了" });
        }
      });
    },
    //领导审核通过
    fnApprovedDbinfo() {
      Dialog.confirm({
        title: '提示',
        message: '确认审核通过？',
      })
        .then(() => {
          approvedDbinfo(this.dbId).then(response => {
            Notify({ type: "success", message: "审核完成" });
            this.$router.go(-1);
          });
        })
        .catch(() => {
          // on cancel
        });

    },
    //复核人通过
    fnCheckPassDbinfo() {
      checkPassDbinfo(this.dbId).then(response => {
        Notify({ type: "success", message: "审核完成" });
        this.$router.go(-1);
      });
    },
    gotoEdit(id) {
      this.$router.push({
        path: '/h5/oddjob-edit', query: {
          oddjobId: id,
          from: 'history'
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.head-title {
  padding: 15px 15px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.job-list {
  padding: 15px 15px 80px;
  .job-item {
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
    & + .job-item {
      margin-top: 15px;
    }
    .job-header {
      display: flex;
      margin-bottom: 10px;
      font-size: 16px;
      .tit {
        flex: 1;
      }
      .pull-r {
        i {
          margin-left: 10px;
        }
      }
    }
    .job-body {
      padding: 10px;
      border-radius: 5px;
      background-color: #f3f5f7;
      dl {
        display: flex;
        margin: 0;
        font-size: 14px;
        & + dl {
          margin-top: 2px;
        }
        dt {
          width: 80px;
          text-align: justify;
          color: #999;
        }
        dd {
          margin-left: 0;
          flex: 1;
          color: #333;
        }
      }
    }
  }
}
.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 10px 5px rgba(51, 51, 51, 0.04);
  button {
    width: 100%;
  }
}
@media (max-width: 550px) {
}
</style>
